<template>
  <div :class="{'detail': true}">
    <div class="first">
      <span class="text">{{$t('cTransportSearch.transportState')}}: {{$t(state())}}</span>
      <span>
        <span class="text">{{$t('cArroval.aog')}}: </span>
        <span v-if="transportObj.aog === 1" style="color: red"> AOG</span>
        <span v-else>{{$t('cArroval.noAog')}}</span>
      </span>
    </div>
    <div class="first">
      <span class="hide">
        <span class="text">{{$t('cTransportSearch.type')}}: </span> {{transportObj.transportType}}
      </span>
      <span>
        <span class="text">{{$t('cTransportSearch.documentNum')}}: </span> {{transportObj.documentNum}}
      </span>
    </div>
    <!-- 专车、危险 -->
    <div v-if="transportObj.transportType === '专车运输'">
      <div>
        <span>
          <span class="text">{{$t('cTransportSearch.start')}}: </span> {{transportObj.startStation}}
        </span>
        <span>
          <span class="text">{{$t('cTransportSearch.end')}}: </span> {{transportObj.targetStation}}
        </span>
      </div>
      <div>
        <span class="text">{{$t('cTransportSearch.appointment')}}: {{time(transportObj.innerTransportEntity)}}</span>
      </div>
    </div>
    <!-- 零担 -->
    <div v-else>
      <div>
        <span><span class="text">{{$t('cTransportSearch.sending')}}: </span>{{transportObj.deliveryUnit}}</span>
      </div>
      <div>
        <span><span class="text">{{$t('cTransportSearch.company')}}: </span>{{transportObj.receiveUnit}}</span>
      </div>
    </div>
    <div class="first">
      <span class="text">{{$t('cTransportSearch.arrival')}}: <span v-if="transportObj.innerTransportEntity">{{transportObj.innerTransportEntity.estimateArriveDate}}</span></span>
    </div>
  </div>
</template>

<script>
import { timer,searchState } from '@/assets/js/common.js'
export default {
  name: '',
  // 组件属性、变量
  props: {
    transportObj: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  // 变量
  data() {
    return {}
  },
  computed: {},
  // 方法
  methods: {
    // 运输状态
    state() {
      let state = ''
      searchState.forEach(item => {
        if(item.id === this.transportObj.transportState) state = item.text
      })
      return state
    },
    // 预约时间
    time(value) {
      if(value === null) return ''
      if (typeof value.estimateSendcarsDate !== 'undefined' && value.estimateSendcarsDate && value.estimateSendcarsEndDate) {
        let start = value.estimateSendcarsDate.slice(0, 11)
        let time = ''
        if (typeof value.estimateSendcarsEndDate === 'number' && value.estimateSendcarsEndDate !== 0) {
          time = timer[value.estimateSendcarsEndDate - 1]
        }
        return start + time
      }
      return ''
    }
  },
  // 生命周期函数
  created() {
  },
  mounted() {
  }
}
</script>

<style scoped>
.text {
  font-weight: bold;
}
.first {
  display: flex;
}
.first span {
  flex: 1;
}
.detail div div {
  display: flex;
}
.detail div div span {
  flex: 1;
}
.detail {
  margin: 2.778vw;
  padding: 1.389vw;
  border: 1px solid rgba(0, 0, 0, .3);
  font-size: 3.889vw;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 5px 5px -1px rgba(0, 0, 255, .1);
  opacity: 1;
}
.hide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
